<template>
  <div class="layout">
    <!-- 切换 -->
    <div class="box">
      <!-- <router-view></router-view> -->
      <!-- home===组件的name -->
      <!-- 方法1： -->
      <!-- <keep-alive exclude="home" include="collect,love,my"> -->
      <!-- <keep-alive :exclude="['home','my']" :include="['collect','love']">
        <router-view></router-view>
      </keep-alive>-->
      <!-- 获取$route.meta.keepAlive  取决于当前显示的组件的meta中的数据 -->
      <!-- =={{ $route.meta.keepAlive }} -->
      <!-- home:keepAlive:true -->
      <!-- my:keepAlive:false -->
      <!-- <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view  v-if="!$route.meta.keepAlive"></router-view>-->

      <!-- <keep-alive>
        <router-view></router-view>
      </keep-alive>-->

      <!-- ============================ -->
      <!-- 方法1： -->
      <!-- <keep-alive exclude="love,collect" include="home,my"> -->
      <!-- <keep-alive :exclude="['love','collect']" :include="['home','my']">
        <router-view></router-view>
      </keep-alive>-->

      <!-- 方法2： -->
      <!-- <keep-alive>

      </keep-alive>-->
      ==={{ $route.meta.keepAlive }}
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>

      <!-- keep-alive
      面试题：keep-alive的理解
      1、他是做路由缓存、
      2、他有两个钩子函数 deactivated activated   只有被 keep-alive包裹的或者被缓存的才会触发
      3、有3个属性  exclude  include  max===exclude/include的值取的是组件的name值
      -->
    </div>

    <!-- 底部导航 -->
    <!-- 有/ -->
    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/collect">收藏</router-link>
      </li>
      <li>
        <router-link to="/love">喜欢</router-link>
      </li>
      <li>
        <router-link to="/my">我的</router-link>
      </li>
    </ul>
    <!-- 拼接 -->
    <!-- <ul>
      <li>
        <router-link to="/layout/home">首页</router-link>
      </li>
      <li>
        <router-link to="/layout/collect">收藏</router-link>
      </li>
      <li>
        <router-link to="/layout/love">喜欢</router-link>
      </li>
      <li>
        <router-link to="/layout/my">我的</router-link>
      </li>
    </ul>-->
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
    console.log(this.$route.meta.keepAlive, 88899);
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.layout {
  height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .box {
    flex: 1;
    overflow: auto;
  }
  ul {
    height: 50px;
    background-color: pink;
    list-style: none;
    // position: fixed;
    // bottom: 0;
    display: flex;

    width: 100%;
    li {
      margin: 10px 0;
      flex: 1;
      text-align: center;
    }
  }
}
</style>